<script setup>

import {nextTick, ref, watch} from "vue";
import {
  reqAddRole,
  reqGiveMenu,
  reqRemoveRoleByRoleId,
  reqRoleListByCondition
} from "@/api/modules/role.js";
import {reqAllMenuTree, reqMenuIdByRoleId} from "@/api/modules/menu.js";
import {ElMessage} from "element-plus";
import {debounce} from "lodash";

// 新增角色实体对象
const addModel = ref({
  roleCode: '',
  roleName: ''
})
// 是否显示新增角色弹出框
const showAdd = ref(false)

// 显示新增角色弹出框
const handleAdd = () => {
  showAdd.value = true
}

// 新增角色确认按钮
const confirmAdd = async () => {
  // 发起添加角色的请求
  await reqAddRole(addModel.value)
  closeAdd()
  ElMessage.success('新增成功')
  await loadRoleList()
}

// 关闭新增角色弹出框
const closeAdd = () => {
  showAdd.value = false
  addModel.value = {}
}

// 编辑角色实体对象
const editModel = ref({
  roleId: '',
  fullCheck: [],
  halfCheck: []
})

// 是否显示编辑角色弹出框
const showEdit = ref(false)

const treeRef = ref()
// 显示编辑角色弹出框
const handleEditRole = async (row) => {
  showEdit.value = true
  editModel.value.roleId = row.roleId
  editModel.value.roleName = row.roleName
  editModel.value.roleCode = row.roleCode
  // 查询该角色拥有的权限
  const permissionIds = await reqMenuIdByRoleId(row.roleId)
  console.log(permissionIds)
  await nextTick(() => {
    treeRef.value.setCheckedKeys(permissionIds)
  })
}


// 编辑角色保存按钮
const confirmEdit = async () => {
  editModel.value.halfCheck = await treeRef.value.getHalfCheckedKeys()
  editModel.value.fullCheck = await treeRef.value.getCheckedKeys()
  await reqGiveMenu(editModel.value)
  closeEdit()
  ElMessage.success('修改成功')
}

// 关闭编辑角色弹出框
const closeEdit = () => {
  showEdit.value = false
  editModel.value = {}
}


const handleRemove = async (row) => {
  await reqRemoveRoleByRoleId(row.roleId)
  ElMessage.success('删除成功')
  await loadRoleList()
}

// 查询参数
const queryParams=ref({
  like:''
})

// 角色列表
const roleList = ref()

// 所有菜单树
const allMenuTree = ref()

// 树节点属性对应关系
const treeProps = {
  children: 'children',
  label: 'label'
}
// 加载角色信息
const loadRoleList = async () => {
  roleList.value = await reqRoleListByCondition(queryParams.value.like);
}

const loadMenuTree = async () => {
  allMenuTree.value = await reqAllMenuTree()
}
loadRoleList()
loadMenuTree()
const loadRoleListDebounce=debounce(loadRoleList,500)
watch(()=>queryParams.value.like,()=>{
  loadRoleListDebounce()
})

</script>

<template>

  <!--  编辑角色弹出框-->
  <el-drawer v-model="showEdit" direction="rtl" title="编辑角色" @close="closeEdit">
    <el-form label-width="80">
      <el-form-item disabled label="角色名称">
        <el-input v-model="editModel.roleName" disabled></el-input>
      </el-form-item>
      <el-form-item label="角色代码">
        <el-input v-model="editModel.roleCode" disabled></el-input>
      </el-form-item>
      <el-form-item label="分配权限">
        <el-tree :data="allMenuTree" show-checkbox default-expand-all node-key="menuId"
                 :props="treeProps"
                 ref="treeRef"></el-tree>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center;width: 100%">
          <el-button type="primary" style="width: 80%" @click="confirmEdit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-drawer>
  <!--  新增角色弹出框-->
  <el-dialog v-model="showAdd" @close="closeAdd" :show-close="false">
    <template #header>新增角色</template>
    <el-form v-model="addModel" label-width="80">
      <el-form-item label="角色名称">
        <el-input v-model="addModel.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色代码">
        <el-input v-model="addModel.roleCode"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center;width: 100%">
          <el-button type="primary" style="width: 80%" @click="confirmAdd">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-card>
    <template #header>
      <el-form inline>
        <el-form-item v-hasPerm="'perm:role:dml'">
          <el-button type="primary" @click="handleAdd">新增角色</el-button>
        </el-form-item>
        <el-form-item v-hasPerm="'perm:role:dql'">
          <el-input v-model="queryParams.like" placeholder="角色名称/角色代码" clearable></el-input>
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="roleList" class-name="el-table">
      <el-table-column prop="roleId" label="角色ID"></el-table-column>
      <el-table-column prop="roleCode" label="角色代码"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button circle class="iconfont icon-xiugai" @click="handleEditRole(row)" title="分配权限" v-hasPerm="'perm:role:giveMenus'"></el-button>
          <el-popconfirm title="Are you sure to delete this?" @confirm="handleRemove(row)">
            <template #reference>
              <el-button circle class="iconfont icon-shanchu" title="删除" v-hasPerm="'perm:role:dml'"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<style lang="scss" scoped>
.el-card {
  height: 100%;

  :deep .el-card__header {
    height: 50px;
    padding: 10px;
  }

  :deep .el-card__body {
    padding: 10px;
    height: calc(100% - 50px);
  }

  .el-table {
    overflow: auto;
    height: 100%;
  }
}
</style>
